<template>
  <div>
    <render-table
      ref="table"
      :apiUrl="listOrder"
      :tableColumn="tableColumn"
      :otherConfig="otherConfig"
      :dict="dict"
      selection="multiple"
      :setupConfig="setupConfig"
      :searchConfig="searchConfig"
      :searchReset="searchReset"
    >
      <template v-slot:state="{ row }">
        <el-tag
          type="success"
          v-if="row.state === '3'"
          style="margin-left: 10px"
          >订单完成待评价</el-tag
        >
        <el-tag
          type="success"
          v-if="row.state === '4'"
          style="margin-left: 10px"
          >评价完成</el-tag
        >
      </template>
      <template v-slot:setup="{ row }">
        <el-button v-if="row.state === '3'" size="medium" type="text" @click="handleRate(row)"
          >评价</el-button
        >
        <!-- <el-button v-if="row.state === '4'" size="medium" type="text" @click="handleRate(row)"
          >查看</el-button
        > -->
        <el-button size="medium" type="text" @click="handleRateByOut(row)"
          >需求单位评价</el-button
        >
      </template>
    </render-table>
    <DialogView
      :dialogTitle="openDialog.dialogTitle"
      :visible="openDialog.visible"
      @submitData="submitData"
      @handleClose="handleClose"
      :popupWidth='"600px"'
    >
      <el-form ref="form" label-position="left" :rules="rules" :model="form" label-width="150px">
        <el-form-item label="准时交货情况" prop="opinionTimeDelivery">
          <el-rate style="margin-top: 8px;" v-model="form.opinionTimeDelivery"></el-rate>
        </el-form-item>
        <el-form-item label="价格情况" prop="opinionPrice">
          <el-rate style="margin-top: 8px;" v-model="form.opinionPrice"></el-rate>
        </el-form-item>
        <el-form-item label="售后服务情况" prop="opinionSales">
          <el-rate style="margin-top: 8px;" v-model="form.opinionSales"></el-rate>
        </el-form-item>
        <el-form-item label="过程配合情况" prop="opinionProcess">
          <el-rate style="margin-top: 8px;" v-model="form.opinionProcess" ></el-rate>
        </el-form-item>
        <el-form-item label="动态平均得分" prop="averageScore">
          <el-rate disabled style="margin-top: 8px;" v-model="averageNum" :show-score="averageNum" ></el-rate>
        </el-form-item>
        <el-form-item label="采购与招标中心意见" prop="purchaseOpinion">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入采购与招标中心意见"
            v-model="form.purchaseOpinion"
          ></el-input>
        </el-form-item>
      </el-form>
    </DialogView>
  </div>
</template>
    
    <script>
import { listOrder, orderOver } from "@/api/evaluate/api";
import { evaluateByOut } from "@/api/order/api";

export default {
  computed:{
    
    averageNum:{
      get() {
        return Math.round((this.form.opinionTimeDelivery + this.form.opinionPrice + this.form.opinionSales + this.form.opinionProcess) / 4 *100)/100;
      },
      set(val) {
        this.averageNum = val
      },
    }
    // "form.averageScore"(val){
    //   console.log('val',val)
    // }
  },
  name: "evaluate",
  data() {
    return {
      form: {
        opinionTimeDelivery: 0,
        opinionPrice: 0,
        opinionSales: 0,
        opinionProcess: 0,
        averageScore: 0,
        purchaseOpinion:'',
        orderId:'',
        evaluateType:'采购'
      },
      openDialog: {
        dialogTitle: "采购员评价",
        visible: false,
      },
      searchReset: {
        materialTypeName: "",
      },
      searchConfig: [
        {
          type: "input",
          key: "orderId",
          placeholder: "请输入订单编号",
        },
      ],
      setupConfig: {},
      dict: {},
      otherConfig: {
        list: "rows",
      },
      listOrder,
      tableColumn: [
        { prop: "orderId", label: "订单编号" },
        { prop: "orderName", label: "订单名称" },
        { prop: "purchaseName", label: "采购员" },
        { prop: "state", label: "状态", slot: true },
        { prop: "materialTypeName", label: "种类名称" },
        { prop: "supplierName", label: "供应商" },
        { prop: "winningPrice", label: "订单价格" },
      ],
      rules: {
        purchaseOpinion: [
          { required: true, message: "采购与招标中心意见不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {},
  methods: {
    handleRateByOut(row){
      evaluateByOut({orderId:row.orderId}).then((res) =>{
        let msg = `该订单评价链接为：${res.msg}`
        this.$alert(msg,'评价链接',{
          confirmButtonText:'确定',
          callback:action =>{
            const input = document.createElement('INPUT');
    input.style.opacity  = 0;
    input.style.position = 'absolute';
    input.style.left = '-100000px';
    document.body.appendChild(input);

    input.value = msg;
    input.select();
    input.setSelectionRange(0, msg.length);
    document.execCommand('copy');
    document.body.removeChild(input);
    this.$message({
              type: 'success',
              message: `已复制内容至剪切板`
            });
    return true;
            
          }
        })
      })
    },
    // 表单重置
    reset() {
      this.form = {
        opinionTimeDelivery: 0,
        opinionPrice: 0,
        opinionSales: 0,
        opinionProcess: 0,
        averageScore: 0,
        purchaseOpinion:'',
        orderId:'',
        evaluateType:'采购'
      };
      // this.resetForm("form");
    },
    handleRate(row) {
      this.form.orderId = row.orderId
      this.openDialog.visible = true;
      this.openDialog.dialogTitle = "采购员评价";
    },
    del(row) {
      const materialTypeId = row.materialTypeId || this.ids;
      this.$modal
        .confirm(
          '是否确认删除种类名称为"' + row.materialTypeName + '"的数据项？'
        )
        .then(function () {
          return delMaterial(materialTypeId);
        })
        .then(() => {
          this.$refs.table.getData();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    // isSelectable(row){
    //   console.log('row',row)
    // },
    handleClose() {
      this.openDialog.visible = false;
      this.reset();
    },
    /** 提交按钮 */
    submitData() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          console.log('this.form',this.form)
          const form = {}
          form.averageScore = this.averageNum
          form.opinionTimeDelivery = this.form.opinionTimeDelivery
          form.opinionPrice = this.form.opinionPrice
          form.opinionSales = this.form.opinionSales
          form.opinionProcess = this.form.opinionProcess
          form.purchaseOpinion = this.form.purchaseOpinion
          form.orderId = this.form.orderId
          form.evaluateType = this.form.evaluateType
          orderOver(form).then(()=>{
            this.$message({
            type: 'success',
            message: '评价成功'
          });
          this.$refs.table.getData();
          this.reset();
          this.openDialog.visible = false;
          })
        }
      });
    },
  },
};
</script>
    